import React from 'react'
import './app.css'
import { Modal, Layout, Menu, Badge, Popover, Button } from 'antd'
import { Link, Route } from 'react-router-dom'
import { appRouters } from '@config/router.js'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons'

const { Header, Sider, Content } = Layout

class App extends React.Component {

  state = {
    selectedKey: '',
    openKey: '/tools',
    collapsed: false,
    unListen: null, // 路由监听器
  }

  componentDidMount() {
    // 监听路由变化
    this.setMenuStatus(this.props.location.pathname)
    let unListen = this.props.history.listen(location => {
      this.setMenuStatus(location.pathname)
    })  
    this.setState({
      unListen
    })
    if (this.props.location.pathname === '/') {
      this.props.history.replace('/home')
    }
  }

  // 生命周期函数-组件销毁时执行
  componentWillUnmount() {
    console.log('销毁app组件路由监听')
    let { unListen } = this.state
    unListen && unListen()
  }

  // 设置导航菜单状态
  setMenuStatus = (pathname) => {
    console.log('app组件-监听路由变化', pathname)
    console.log(pathname.split('/'))
    this.setState({
      selectedKey: pathname,
      openKey: '/' + pathname.split('/')[1]
    })
  }

  // 切换导航菜单栏展开状态
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    })
  }

  // Menu.SubMenu状态改变时触发
  onOpenChange = (e) => {
    this.setState({
      openKey: e[1]
    })
  }

  // 退出登录
  quitLogin = () => {
    window.localStorage.removeItem('logined')
    this.props.history.replace('/login')
  }

  // 查看消息
  lookMessage = () => {
    this.props.history.replace('/message/list')
  }

  // 重置引导
  resetGuide = () => {
    Modal.confirm({
      content: '确定重新进入引导吗',
      onOk: () => {
        this.props.history.replace('/home')
      },
      onCancel: () => {
        console.log('取消')
      }
    })
  }

  render() {
    let { selectedKey, openKey, collapsed } = this.state
    return (
      <div className="_app">
        <Layout style={{ height: '100%' }}>
          <Sider trigger={ null } collapsible collapsed={ collapsed } style={{ background: '#0b1f54' }}>
            <Link to="/home">
              { collapsed ? <div className="logo"></div> : <div className="logo-text">预算项目申报系统</div> }
            </Link>
            <Menu
              theme="dark"
              mode="inline"
              selectedKeys={ selectedKey }
              openKeys={ [openKey] }
              onOpenChange={ this.onOpenChange }
              style={{ background: '#0b1f54' }}
            >
              {
                appRouters.map((item) => {
                  if (!item.hideLink) {
                    if (item.type === 'item') {
                      return (
                        <Menu.Item key={ item.path } icon={ item.icon ? <item.icon /> : null }>
                          <Link to={ item.path }>{ item.name }</Link>
                        </Menu.Item>
                      )
                    }
                    else if (item.type === 'subMenu') {
                      return (
                        <Menu.SubMenu key={ item.path } icon={ item.icon ? <item.icon /> : null } title={ item.name }>
                          {
                            item.children.map((childrenItem) => {
                              if (childrenItem.hideLink !== false) {
                                return (
                                  <Menu.Item key={ item.path + childrenItem.path } icon={ childrenItem.icon ? <childrenItem.icon /> : null }>
                                    <Link to={ item.path + childrenItem.path }>{ childrenItem.name }</Link>
                                  </Menu.Item>
                                )
                              }
                              return null
                            })
                          }
                        </Menu.SubMenu>
                      )
                    }
                  }
                  return null
                })
              }
            </Menu>
            {
              React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                style: { color: '#fff' },
                onClick: this.toggle,
              })
            }
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-header">
              <div className="identity">刑事侦查局</div>
              <div className="controller">
                <div className="controller-guide" onClick={ this.resetGuide }>
                  <img className="controller-guide-img" src="/images/guide.png" alt=""/>
                  <span className="controller-guide-text">操作指导</span>
                </div>
                <div className="controller-message" onClick={ this.lookMessage }>
                  <Badge count={ 5 } offset={[ 7, 0 ]}>
                    <img className="controller-message-img" src="/images/message.png" alt=""/>
                  </Badge>
                </div>
                <Popover
                  placement="bottomRight"
                  content={
                    <Button type="link" onClick={ this.quitLogin }>退出登录</Button>
                  }
                  trigger="hover"
                >
                  <div className="controller-user">
                    <div className="controller-userlogo"></div>
                    <div className="controller-username">用户名</div>
                  </div>
                </Popover>
              </div>
            </Header>
            <Content>
              {
                appRouters.map((item, index) => {
                  if (item.type === 'item') {
                    return (
                      <Route
                        key={ item.path + index }
                        path={ item.path }
                        exact={ item.exact }
                        component={ item.component }
                      >
                      </Route>
                    )
                  }
                  else if (item.type === 'subMenu') {
                    return item.children.map((childrenItem, childrenIndex) => {
                      return (
                        <Route
                          key={ childrenItem.path + childrenIndex }
                          path={ item.path + childrenItem.path }
                          exact={ childrenItem.exact }
                          component={ childrenItem.component }
                        >
                        </Route>
                      )
                    })
                  }
                  return null
                })
              }
            </Content>
          </Layout>
        </Layout>
      </div>
    )
  }

}

export default App